<!--支撑单位首页-->
<template>
  <div class="enterprise-dashboard">
    <div class="top-part">
      <div class="title">{{ realName }}</div>
      <div class="menu-list">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in menuList"
            :key="index"
            :label="item.label"
            :name="index + ''"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="right">
        <el-input type="text" v-model="unitName" placeholder="输入搜索关键词">
          <svg-icon
            slot="suffix"
            icon-class="search"
            class="search-icon"
            @click="gotoEnterprise(unitName)"
          />
        </el-input>
        <el-dropdown>
          <div class="user">
            <img :src="avatar" alt />
            <span>{{ name }}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="img-part">
      <img src="../../assets/images/dashboard-img.png" alt />
      <span class="text" @click="gotoEnterprise(false)" style="cursor: pointer">
        <span class="name">纳管单位</span>
        <span class="num">{{ ngData }}</span>
        <svg-icon class-name="warning-icon" icon-class="warning" />
        <span class="name1">企业备案率</span>
        <span class="num1">{{recordRate}}%</span>
      </span>
    </div>
    <div class="content-part one">
      <div class="box">
        <div class="title">资产预览</div>
        <div class="num-list">
          <div class="num-item" v-for="(item, index) in oneNumList" :key="index">
            <div class="icon-box">
              <svg-icon class-name="svg-icon" :icon-class="item.iconClass" />
              <div class="right">
                <span class="name">{{ item.name }}</span>
                <span class="num" @click="gotoProperty(item.path)">
                  {{
                  item.total
                  }}
                </span>
              </div>
            </div>
            <div class="num-box">
              <span class="name">
                {{
                index == 4 ? '测评率：' : '备案率：'
                }}
              </span>
              <span class="num" @click="gotoProperty(item.hasPoliceOrgCodePath)">
                {{ item.recordRate }}
                <span class="unit">%</span>
              </span>
            </div>
            <div class="num-box">
              <span class="name">
                {{
                index == 4 ? '未测评：' : '未备案：'
                }}
              </span>
              <span
                class="num"
                @click="gotoProperty(item.unHasPoliceOrgCodePath)"
              >{{ item.unRecordCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-part two">
      <div class="box left">
        <div class="title">任务概览</div>
        <div class="text-box">
          <div class="text-item">
            <div class="num">{{ teskData.total }}</div>
            <div class="name">任务数</div>
          </div>
          <div class="text-item">
            <div class="num">
              {{ teskData.completeRate }}
              <span class="unit">%</span>
            </div>
            <div class="name">任务完成率</div>
          </div>
          <div class="text-item">
            <div class="num">{{ teskData.unCompleteCount }}</div>
            <div class="name">临期任务</div>
          </div>
          <div class="text-item">
            <div class="num">{{ teskData.overtimeCount }}</div>
            <div class="name">超时任务</div>
          </div>
        </div>
      </div>
      <div class="box right">
        <div class="title">未完成任务</div>
        <div class="bar-list">
          <div class="bar-item" v-for="(item, index) in teskTypeList" :key="index">
            <div class="name">{{ item.name }}</div>
            <div class="bar">
              <div class="bar-inner" :style="`width: ${item.completeCountRate}%`"></div>
              <div class="bar-num">{{ item.completeCount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getEnterpriseStat,
  getDomainStat,
  getAppStat,
  getAppletStat,
  getSystemStat,
  getSystemTestStat,
  getEnterpriseRecordStat,
  getCheckTaskStat,
  getCheckTaskTypeStat
} from "@/api/dashboard/index";
export default {
  data() {
    return {
      activeName: "",
      unitName: "",
      ngData: 0, // 纳管单位
      recordRate: 0, // 备案率
      oneNumList: [
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: "yuming",
          name: "域名",
          path: "/property/index?tabName=1",
          hasPoliceOrgCodePath: "/property/index?tabName=1&hasPoliceOrgCode=1",
          unHasPoliceOrgCodePath: "/property/index?tabName=1&hasPoliceOrgCode=0"
        },
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: "app",
          name: "APP",
          path: "/property/index?tabName=4",
          hasPoliceOrgCodePath: "/property/index?tabName=4&hasPoliceOrgCode=1",
          unHasPoliceOrgCodePath: "/property/index?tabName=4&hasPoliceOrgCode=0"
        },
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: "xiaochengxu",
          name: "小程序",
          path: "/property/index?tabName=5",
          hasPoliceOrgCodePath: "/property/index?tabName=5&hasPoliceOrgCode=1",
          unHasPoliceOrgCodePath: "/property/index?tabName=5&hasPoliceOrgCode=0"
        },
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: "xinxixitong",
          name: "信息系统",
          path: "/property/index?tabName=2",
          hasPoliceOrgCodePath: "/property/index?tabName=2&hasPoliceOrgCode=1",
          unHasPoliceOrgCodePath: "/property/index?tabName=2&hasPoliceOrgCode=0"
        },
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: "xitongpinggu",
          name: "系统评估",
          path: "/property/index?tabName=2",
          hasPoliceOrgCodePath: "/property/index?tabName=2&hasPoliceOrgCode=1",
          unHasPoliceOrgCodePath: "/property/index?tabName=2&hasPoliceOrgCode=0"
        }
      ],
      teskData: {
        total: 0,
        completeRate: 0,
        unCompleteCount: 0,
        overtimeCount: 0
      },
      teskTypeList: []
    };
  },

  computed: {
    name() {
      return this.$store.getters.name;
    },
    realName() {
      return this.$store.getters.realName;
    },
    avatar() {
      return this.$store.getters.avatar;
    },
    menuList() {
      let list = [
        { label: "域名", path: "/property/index?tabName=1" },
        { label: "APP", path: "/property/index?tabName=4" },
        { label: "小程序", path: "/property/index?tabName=5" },
        { label: "信息系统", path: "/property/index?tabName=2" }
      ];
      return list;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getEnterpriseStat();
      this.getDomainStat();
      this.getAppStat();
      this.getAppletStat();
      this.getSystemStat();
      this.getSystemTestStat();
      this.getEnterpriseRecordStat();
      this.getCheckTaskStat();
      this.getCheckTaskTypeStat();
    },
    // 纳管单位
    getEnterpriseStat() {
      getEnterpriseStat({}).then(res => {
        this.ngData = res.data;
      });
    },
    // 域名数据
    getDomainStat() {
      getDomainStat({}).then(res => {
        this.$set(this.oneNumList[0], "total", res.data.total);
        this.$set(this.oneNumList[0], "recordRate", res.data.recordRate * 100);
        this.$set(this.oneNumList[0], "unRecordCount", res.data.unRecordCount);
      });
    },
    // APP数据
    getAppStat() {
      getAppStat({}).then(res => {
        this.$set(this.oneNumList[1], "total", res.data.total);
        this.$set(this.oneNumList[1], "recordRate", res.data.recordRate * 100);
        this.$set(this.oneNumList[1], "unRecordCount", res.data.unRecordCount);
      });
    },
    // 小程序数据
    getAppletStat() {
      getAppletStat({}).then(res => {
        this.$set(this.oneNumList[2], "total", res.data.total);
        this.$set(this.oneNumList[2], "recordRate", res.data.recordRate * 100);
        this.$set(this.oneNumList[2], "unRecordCount", res.data.unRecordCount);
      });
    },
    // 信息系统数据
    getSystemStat() {
      getSystemStat({}).then(res => {
        this.$set(this.oneNumList[3], "total", res.data.total);
        this.$set(this.oneNumList[3], "recordRate", res.data.recordRate * 100);
        this.$set(this.oneNumList[3], "unRecordCount", res.data.unRecordCount);
      });
    },
    // 系统评估数据
    getSystemTestStat() {
      getSystemTestStat({}).then(res => {
        this.$set(this.oneNumList[4], "total", res.data.total);
        this.$set(this.oneNumList[4], "recordRate", res.data.evalRate * 100);
        this.$set(this.oneNumList[4], "unRecordCount", res.data.unEvalCount);
      });
    },
    // 首页-企业备案统计
    getEnterpriseRecordStat() {
      getEnterpriseRecordStat({}).then(res => {
        this.recordRate = Math.round(res.data.recordRate * 100);
      });
    },
    // 任务概览数据
    getCheckTaskStat() {
      getCheckTaskStat({}).then(res => {
        this.teskData = {
          ...res.data,
          completeRate: res.data.completeRate * 100
        };
      });
    },
    nameReplace(value) {
      let name = "";
      switch (value) {
        case "01":
          name = "交互式任务";
          break;
        case "02":
          name = "整改任务";
          break;
        case "03":
          name = "备案任务";
          break;
        case "04":
          name = "常规任务";
          break;
      }
      return name;
    },
    // 未完成任务
    getCheckTaskTypeStat() {
      getCheckTaskTypeStat({}).then(res => {
        for (const key in res.data) {
          this.teskTypeList.push({
            name: this.nameReplace(key),
            completeCount: res.data[key].unCompleteCount,
            completeCountRate:
              ((res.data[key].unCompleteCount) /
                res.data[key].total) *
              100
          });
        }
      });
    },
    handleClick(tab, event) {
      const row = this.menuList[this.activeName];
      if (row.path) {
        this.$router.push({ path: row.path });
      }
    },
    gotoProperty(path) {
      if (path) {
        this.$router.push({ path });
      }
    },
    gotoEnterprise(unitName) {
      let path = "/enterprise/index";
      if (unitName) {
        path = "/enterprise/index?unitName=" + unitName;
      }
      this.$router.push({ path });
    },
    async logout() {
      this.$confirm("确定退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/login";
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.enterprise-dashboard {
  padding: 0.38rem 1.38rem 0;
  .top-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.89rem;

    .title {
      font-size: 0.53rem;
    }
    .menu-list {
      ::v-deep {
        .el-tabs__header {
          margin-bottom: 0;
        }
        .el-tabs__active-bar {
          background: transparent;
        }
        .el-tabs__nav-wrap::after {
          display: none;
        }
        .el-tabs__item {
          color: rgba(0, 8, 34, 0.6);
          font-size: 0.3rem;
          // &.is-active {
          //   color: #000822;
          // }
        }
      }
    }
    .right {
      display: flex;
      .el-input {
        width: 3.48rem;
        height: 0.6rem;
        font-size: 0.23rem;
        ::v-deep .el-input__inner {
          height: 0.6rem;
        }
        .search-icon {
          height: 0.6rem;
          font-size: 0.25rem;
          margin-right: 0.25rem;
        }
      }
      .user {
        display: flex;
        align-items: center;
        margin-left: 0.14rem;
        width: 1.5rem;
        height: 0.6rem;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);
        border-radius: 0.04rem;
        font-size: 0.23rem;
        color: #000822;
        padding-left: 0.1rem;
        box-sizing: border-box;
        img {
          width: 0.45rem;
          height: 0.45rem;
          border-radius: 0.07rem;
          margin-right: 0.11rem;
        }
      }
    }
  }
  .img-part {
    padding-left: 2.96rem;
    margin-bottom: 0.6rem;
    img {
      width: 3rem;
      height: 3rem;
    }
    .text {
      vertical-align: 0.45rem;
      .name {
        font-size: 0.4rem;
        color: #000822;
        margin: 0 0.3rem 0 0.45rem;
      }
      .num {
        font-size: 0.9rem;
        color: #000822;
        margin-right: 0.15rem;
      }
      .warning-icon {
        font-size: 0.45rem;
      }
      .name1 {
        font-size: 0.4rem;
        color: #000822;
        margin: 0 0.3rem 0 1.2rem;
      }
      .num1 {
        font-size: .75rem;
        color: #000822;
      }
    }
  }
  .content-part {
    display: flex;
    justify-content: space-between;
    &.one {
      margin-bottom: 0.3rem;
      .box {
        width: 100%;
        height: 3.38rem;
        .num-list {
          margin-top: 0.63rem;
          padding: 0 0.15rem;
          display: flex;
          justify-content: space-between;
          .num-item {
            width: 3.14rem;
            .icon-box {
              display: flex;
              .svg-icon {
                font-size: 0.6rem;
              }
              .right {
                font-size: 0.38rem;
                color: #000822;
                .name {
                  font-size: 0.35rem;
                  color: #000822;
                  margin: 0 0.3rem 0 0.15rem;
                }
                .num {
                  cursor: pointer;
                }
              }
            }
            .num-box {
              font-size: 0.23rem;
              color: #000822;
              padding-left: 0.75rem;
              margin-top: 0.1rem;
              .num {
                cursor: pointer;
                font-size: 0.26rem;
                .unit {
                  font-size: 0.19rem;
                }
              }
            }
          }
        }
      }
    }
    &.two {
      height: 3.38rem;
      .box.left {
        width: 43.8%;
        .text-box {
          padding: 0 0.41rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-align: center;
          margin-top: 0.59rem;

          .text-item {
            .num {
              font-size: 0.45rem;
              color: #000822;

              .unit {
                font-size: 0.3rem;
              }
            }

            .name {
              margin-top: 0.15rem;
              font-size: 0.26rem;
              color: rgba(0, 8, 34, 0.8);
            }
          }
        }
      }
      .box.right {
        width: calc(56.2% - 0.3rem);
        .bar-list {
          margin-top: 0.3rem;
          display: flex;
          flex-wrap: wrap;
          padding: 0 0.21rem;
          .bar-item {
            width: 50%;
            margin-bottom: 0.33rem;
            .name {
              font-size: 0.26rem;
              color: #000822;
              margin-bottom: 0.07rem;
            }
            .bar {
              width: 3.7rem;
              display: flex;
              align-items: center;
              .bar-inner {
                height: 0.07rem;
                border-radius: 1px;
                background: #1c4088;
                margin-right: 0.2rem;
              }
              .bar-num {
                font-size: 0.3rem;
                color: #000822;
              }
            }
          }
        }
      }
    }
    .box {
      padding: 0.45rem 0.38rem;
      background: #fff;
      border-radius: 0.07rem;
      box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);

      .title {
        font-size: 0.38rem;
        color: #000822;
        display: flex;
        align-items: center;

        &::before {
          content: "";
          display: block;
          width: 0.04rem;
          height: 0.3rem;
          background: #1c4088;
          margin-right: 0.15rem;
        }
      }
    }
  }
}
</style>